<template>
    <div>
        <van-sticky>
            <div class="header">全部服务</div>
        </van-sticky>
        <div class="grid">
            <van-grid :border="false" :column-num="3">
                <van-grid-item v-for="item in serviceList" :key="item.id" @click="gotoService(item)">
                    <van-image :src="'http://218.7.112.123:10001/'+item.imgUrl" />
                    <div>{{item.serviceName}}</div>
                </van-grid-item>
            </van-grid>
        </div>
        <div class="box"></div>
    </div>
</template>
<script>
import { serviceListQuery } from "../service/commons/service";
export default {
    data() {
        return {
            serviceList: [],
        }
    },
    methods: {
        gotoService(item) {
            switch (item.serviceName) {
                case "停哪儿":
                    this.$router.push("/stop");
                    break;
                case "城市地铁":
                    this.$router.push("/metro");
                    break;
                case "外卖订餐":
                    this.$router.push("/takeout");
                    break;
                case "找工作":
                    this.$router.push("/job");
                    break;
                case "找房子":
                    this.$router.push("/house");
                    break;
                case "生活缴费":
                    this.$router.push("/living");
                    break;
                case "看电影":
                    this.$router.push("/movie");
                    break;
                case "智慧交管":
                    this.$router.push("/traffic");
                    break;
                case "活动管理":
                    this.$router.push("/active");
                    break;
                default:
                    this.$dialog.alert({
                        message: "此功能暂未开放,敬请期待!"
                    }).then(() => {

                    })
            }
        }
    },
    async created() {
        let { data } = await serviceListQuery();
        console.log(data);
        this.serviceList = data.rows;
    }
}

</script>
<style scoped>
.box {
    height: 50px;
}
</style>